<template>
  <div class="tab-content">
    <div class="tab-panel">
      <h2>历史上的今天</h2>
      <div v-if="historyData.loading" class="loading">
        正在加载历史事件...
      </div>
      <div v-else-if="historyData.error" class="error">
        {{ historyData.error }}
      </div>
      <div v-else class="history-content">
        <div class="history-list">
          <div class="history-item" v-for="(item, index) in historyData.data" :key="index">
            <div class="history-item-content">
              <span class="year">{{ item.year }}</span>
              <span class="description">{{ item.description }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, toRefs, watch } from 'vue';
import { API_BASE_URL } from '../utils/WebConstants.ts';

const props = defineProps<{
  refreshKey?: number;
}>();

const { refreshKey } = toRefs(props);

const historyData = ref({
  loading: true,
  error: null as string | null,
  data: [] as { year: string; description: string }[],
});

// 获取历史上的今天
const fetchHistory = async () => {
  try {
    historyData.value.loading = true;
    historyData.value.error = null;
    const response = await fetch(
      `${API_BASE_URL}/today_in_history?encoding=text`
    );
    const result = await response.text();

    // 解析文本数据
    const lines = result.split('\n').filter((line) => line.trim() !== '');
    // 只保留以数字开头的条目行
    const dataLines = lines.filter((line) => /^\d+\./.test(line.trim()));

    // 提取年份和描述
    historyData.value.data = dataLines.map((line) => {
      // 匹配年份 (年) 格式
      const yearMatch = line.match(/\((\d+)\s*年\)/);
      const year = yearMatch ? yearMatch[1] : '';

      // 移除序号部分，只保留事件描述和年份
      const description = line
        .replace(/^\d+\.\s*/, '')
        .replace(/\(\d+\s*年\)\s*$/, '')
        .trim();

      return {
        year: year,
        description: description,
      };
    });
  } catch (err) {
    historyData.value.error = '网络错误，请稍后重试';
    console.error('获取历史事件时出错:', err);
  } finally {
    historyData.value.loading = false;
  }
};

// 监听刷新键变化
watch(refreshKey, () => {
  fetchHistory();
});

onMounted(() => {
  fetchHistory();
});
</script>

<style scoped>
.tab-panel h2 {
  text-align: center;
  margin-bottom: 20px;
  color: white;
}

.loading, .error {
  text-align: center;
  padding: 40px 20px;
  font-size: 1.2rem;
}

.loading {
  color: #ccc;
}

.error {
  color: #d32f2f;
}

.history-list {
  background: #2d2d2d;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.history-item {
  padding: 10px 0;
  border-bottom: 1px solid #444;
}

.history-item:last-child {
  border-bottom: none;
}

.history-item-content {
  display: flex;
  align-items: flex-start;
}

.year {
  background-color: #1890ff;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: bold;
  margin-right: 12px;
  flex-shrink: 0;
  width: 40px;
  text-align: right;
}

.description {
  flex-grow: 1;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #ddd;
}

@media (max-width: 768px) {
  .history-list {
    padding: 15px;
  }

  .history-item-content {
    flex-direction: column;
  }

  .year {
    margin-bottom: 5px;
  }
}
</style>